<template>
	<view class="outer_box">
		<view class="logistics-box">
			<view class="logistics">
				<view class="">
					物流状态：
				</view>
				<view class="" v-if="logisticsInfo.msg.state==0">
					运输中
				</view>
				<view class="" v-if="logisticsInfo.msg.state==1">
					揽件
				</view>
				<view class="" v-if="logisticsInfo.msg.state==2">
					货物寄送过程出了问题(联系商家)
				</view>
				<view class="" v-if="logisticsInfo.msg.state==3">
					已签收
				</view>
				<view class="" v-if="logisticsInfo.msg.state==4">
					退签或异常签收(联系商家)
				</view>
				<view class="" v-if="logisticsInfo.msg.state==5">
					正在派件中
				</view>
				<view class="" v-if="logisticsInfo.msg.state==6">
					退回
				</view>
				<view class=""></view>
			</view>
			<view class="logistics">
				<view class="">
					物流公司：
				</view>
				<view class="">
					{{logisticsInfo.com}}
				</view>
				<view class=""></view>
			</view>
			<view class="logistics">
				<view class="">
					运单编号：
				</view>
				<view class="">
					{{orderNumber}}
				</view>
				<view class="">
					<view class="copy-btn" @tap="copy()">复制</view>
				</view>
			</view>
		</view>
		<view class="line"/>
		<!-- 物流详情 -->
		<scroll-view scroll-y="true" :style="{height:height+'px'}">
			<block class="block" v-for="(item, index) in logisticsInfo.msg.context" :key="index">
			    <trackNode :is-first="index===tracesData.length-1" :is-newest="index===0" :is-main-node="item.isMainNode" :node-data="item"></trackNode>
			</block>
			
		</scroll-view>
		
	</view>
</template>

<script>
	import trackNode from '../../components/etherealwheat-track/trackNode.vue'
	export default {
		components: {
		  trackNode
		},
		data() {
			return {		
					context: [
								{
									time: '2021.1.18 19:00',
									desc: "客户签收人: 刘 已签收  感谢使用圆通速递，期待再次为您服务 如有疑问请联系：18521206027，投诉电话：051265565526。疫情期间圆通每天对网点多次消毒，快递小哥每天测量体温，佩戴口罩"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【江苏省苏州市姑苏六区公司】 派件中  派件人: 王会林 电话 18521206027 。 圆通快递小哥每天已测体温，请放心收寄快递 如有疑问，请联系：051265565526"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【江苏省苏州市姑苏六区公司】 已收入"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【苏州转运中心】 已发出 下一站 【江苏省苏州市姑苏区公司】"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【苏州转运中心公司】 已打包"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【苏州转运中心公司】 已收入"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【深圳转运中心】 已发出 下一站 【苏州转运中心公司】"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【深圳转运中心公司】 已收入"
								},
								{
									time: '2021.1.18 19:00',
									desc: "【广东省深圳市龙岗区龙城】 已发出 下一站 【深圳转运中心公司】"
								},
								{
									time: 1634563320,
									desc: "【广东省深圳市龙岗区龙城公司】 已打包"
								},
								{
									time: 1634554280,
									desc: "【广东省深圳市龙岗区龙城公司】 已揽收 取件人: 刘晓杰 (15820442213)"
								}
							],
				
				height:500,
				logisticsInfo:'',
				orderNumber:'',
				tracesData: [
				          {
				            acceptStation: '包裹已被吴亦包裹已被吴亦发同学签收包裹已被吴亦发同学签收包裹已被吴亦发同学签收包裹已被吴亦发同学签收发同学签收', // 节点描述
				            createTime: '2019-10-24 15: 27: 16',
				            status: 'COMPLETE', // 节点状态
				            phone: '', // 电话
				            statusName: '已签收', // 节点标题
				            isMainNode: true // 是否主节点，主节点前方展示icon
				          },
				          {
				            acceptStation: '由派送员蔡小坤同志配送，电话：',
				            createTime: '2019-10-24 15: 26: 41',
				            status: 'DELIVERING',
				            phone: '16677778888',
				            statusName: '运输中',
				            isMainNode: true
				          },
				          {
				            acceptStation: '已到XXX小区快递点',
				            createTime: '2019-10-24 15: 26: 41',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '已到海宁集散中心',
				            createTime: '2019-10-24 15: 26: 18',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '已到杭州集散中心',
				            createTime: '2019-10-24 15: 26: 07',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '包裹已到达余杭区集散中心',
				            createTime: '2019-10-24 15: 25: 54',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '快递员已上门取件',
				            createTime: '2019-10-24 15: 25: 17',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '已揽收',
				            isMainNode: false
				          },
				          {
				            acceptStation: '等待快递员上门揽件',
				            createTime: '2019-10-24 15: 25: 00',
				            status: 'WATTING_DELIVER',
				            phone: '',
				            statusName: '已发货',
				            isMainNode: true
				          },
				          {
				            acceptStation: '您的包裹正在打包',
				            createTime: '2019-10-24 15: 24: 00',
				            status: 'WATTING_DELIVER',
				            phone: '',
				            statusName: '待发货',
				            isMainNode: false
				          },
				          {
				            acceptStation: '订单支付成功，等待商家发货',
				            createTime: '2019-10-24 15: 22: 30',
				            status: 'PAYED',
				            statusName: '已支付',
				            isMainNode: true
				          },
				          {
				            acceptStation: '订单提交成功',
				            createTime: '2019-10-24 15: 22: 00',
				            status: 'WATTING_PAY',
				            statusName: '已下单',
				            isMainNode: true
				          }
				        ]
			}
		},
		onReady() {
			uni.getSystemInfo({ 
				success:(res)=> { 
					this.height = res.windowHeight - uni.upx2px(190)
				}
			})
		},
		onLoad(option) {
			this.orderNumber = option.orderNumber
			this.waybillinformation(option.orderNumber)
		},
		methods: {
			waybillinformation(orderNumber) {
				this.$api.waybillinformation({
					orderNumber: orderNumber,
					type:1
				}).then((res) => {
					if (res.data.success) {
						console.log(res.data)
						this.logisticsInfo = res.data.dataMap
						for(var i = 0; i<this.logisticsInfo.msg.context.length; i++){
							var time = this.logisticsInfo.msg.context[i].time 
							this.logisticsInfo.msg.context[i].time = this.timestampToTime(time)
						}
					} else {
			
					}
			
				})
			},
			timestampToTime(timestamp) {
			        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘10	
			        var Y = date.getFullYear() + '-';		
			        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';	
			        var D = date.getDate() + ' ';		
			        var h = date.getHours() + ':';	
			        var m = date.getMinutes() + ':';
			        var s = date.getSeconds();
			        return Y+M+D+h+m+s;
			
			    },
			copy() {
				uni.setClipboardData({
					data: this.orderNumber, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.outer_box{
		display: flex;
		flex-direction: column;
		.block{
			margin-left: 20rpx;
		}
		.line{
			width: 100%;
			height: 2rpx;
			background-color: #F8F8F8;
		}
		.logistics-box{
			padding: 20rpx;
			.logistics{
				display: flex;
				margin-bottom: 10rpx;
				view:nth-child(1) {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
				
				view:nth-child(2) {
					flex: 3;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
				view:nth-child(3) {
					flex: 1;
					.copy-btn {
						margin: 0 auto;
						width: 90rpx;
						height: 40rpx;
						background: #FFFFFF;
						border: 2rpx solid #999999;
						border-radius: 24rpx;
						font-weight: 400;
						color: #666666;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
				
			}
		}
		
	}

</style>
